<script setup>
import { ref } from 'vue';
import { ElPagination } from 'element-plus';

/*新闻列表的对象*/
const newsList = ref([
  {
    id: 1,
    title: '为刺激电动汽车消费 德国延长补贴计划',
    date: '15',
    year: '2019.12',
    content: '为推动电动汽车发展，德国政府及汽车行业计划提高财政补助，同时还将采取扩建电动汽车充电桩等一系列措施，三年前提出的补助政策原定于2020年底结束，现在计划延长至2025年底。',
    url: 'news.html'
  },
  {
    id: 2,
    title: '2020CES电子展:本田将提出自动驾驶新概念',
    date: '15',
    year: '2019.12',
    content: '本田将在2020年1月要于美国拉斯维加斯展开的CES消费性电子展中展出称为AugmentedDrivingConcept的概念。',
    url: 'news.html'
  },
  {
    id: 3,
    title: '为国产Model 3做准备？特斯拉智能召唤来中国了！',
    date: '16',
    year: '2019.12',
    content: '12月23日，一名特斯拉粉丝分享了特斯拉在中国发布的智能召唤功能（Smart Summon），有了该功能，特斯拉车主可以让车辆在停车场的指定位置接他们。',
    url: 'news.html'
  }
]);

/*咨询推荐*/
const RenewsList = ref([
  { id: 1, title: '11月国内车市销量下滑3.6%', url: 'news.html' },
  { id: 2, title: '难说再见！保时捷第七代911停产', url: 'news.html' },
  { id: 3, title: '太好了！保时捷第七代911停产', url: 'news.html' },
  // ... 更多新闻数据
]);

const totalItems = ref(1000);

const handlePageChange = (currentPage) => {
  console.log(currentPage);
};
</script>

<template>
  <div id="wrapper" class="layout">
    <div class="curpostion">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item><a href="/">汽车资讯</a></el-breadcrumb-item>
        <el-breadcrumb-item><a href="/">汽车新闻详情</a></el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div id="content">
      <h2 class="title">汽车资讯</h2>
      <ul class="newslist">
        <li v-for="news in newsList" :key="news.id">
          <div class="date">{{ news.date }}<span>{{ news.year }}</span></div>
          <div class="nitem">
            <h3><a :href="news.url">{{ news.title }}</a></h3>
            <p>{{ news.content }}</p>
          </div>
        </li>
      </ul>
      <div class="pagenav">
        <el-pagination
            background
            layout="prev, pager, next"
            :total="totalItems"
            @current-change="handlePageChange">
        </el-pagination>
      </div>
    </div>

    <div id="sidebar">
      <h2>资讯推荐</h2>
      <ul>
        <li v-for="news in RenewsList" :key="news.id">
          <a :href="news.url">{{ news.title }}</a>
        </li>
      </ul>
    </div>
<!--    <div id="content">-->

<!--      <h2 class="title">汽车资讯</h2>-->
<!--      <ul class="newslist">-->
<!--        <li>-->
<!--          <div class="date">15<span>2019.12</span></div>-->
<!--          <div class="nitem">-->
<!--            <h3><a href="news.html">为刺激电动汽车消费 德国延长补贴计划</a></h3>-->
<!--            <p>为推动电动汽车发展，德国政府及汽车行业计划提高财政补助，同时还将采取扩建电动汽车充电桩等一系列措施，三年前提出的补助政策原定于2020年底结束，现在计划延长至2025年底。</p>-->
<!--          </div>-->
<!--        </li>-->
<!--        <li>-->
<!--          <div class="date">15<span>2019.12</span></div>-->
<!--          <div class="nitem">-->
<!--            <h3><a href="news.html">2020CES电子展:本田将提出自动驾驶新概念</a></h3>-->
<!--            <p>本田将在2020年1月要于美国拉斯维加斯展开的CES消费性电子展中展出称为AugmentedDrivingConcept的概念。</p>-->
<!--          </div>-->
<!--        </li>-->
<!--        <li>-->
<!--          <div class="date">16<span>2019.12</span></div>-->
<!--          <div class="nitem">-->
<!--            <h3><a href="news.html">为国产Model 3做准备？特斯拉智能召唤来中国了！</a></h3>-->
<!--            <p>12月23日，一名特斯拉粉丝分享了特斯拉在中国发布的智能召唤功能（Smart Summon），有了该功能，特斯拉车主可以让车辆在停车场的指定位置接他们。</p>-->
<!--          </div>-->
<!--        </li>-->
<!--        <li>-->
<!--          <div class="date">12<span>2019.12</span></div>-->
<!--          <div class="nitem">-->
<!--            <h3><a href="news.html">调查丨北京车市寒意袭人：有4S店优惠近10万元 看车人仍寥寥无几</a></h3>-->
<!--            <p>为推动电动汽车发展，德国政府及汽车行业计划提高财政补助，同时还将采取扩建电动汽车充电桩等一系列措施，三年前提出的补助政策原定于2020年底结束，现在计划延长至2025年底。</p>-->
<!--          </div>-->
<!--        </li>-->
<!--        <li>-->
<!--          <div class="date">17<span>2019.12</span></div>-->
<!--          <div class="nitem">-->
<!--            <h3><a href="news.html">凯翼汽车智慧工厂竣工投产 全新紧凑型SUV炫界正式下线</a></h3>-->
<!--            <p>为推动电动汽车发展，德国政府及汽车行业计划提高财政补助，同时还将采取扩建电动汽车充电桩等一系列措施，三年前提出的补助政策原定于2020年底结束，现在计划延长至2025年底。</p>-->
<!--          </div>-->
<!--        </li>-->
<!--        <li>-->
<!--          <div class="date">16<span>2019.12</span></div>-->
<!--          <div class="nitem">-->
<!--            <h3><a href="news.html">丰田全面推广燃料电池技术 多家车企采购使用</a></h3>-->
<!--            <p>为推动电动汽车发展，德国政府及汽车行业计划提高财政补助，同时还将采取扩建电动汽车充电桩等一系列措施，三年前提出的补助政策原定于2020年底结束，现在计划延长至2025年底。</p>-->
<!--          </div>-->
<!--        </li>-->
<!--        <li>-->
<!--          <div class="date">22<span>2019.12</span></div>-->
<!--          <div class="nitem">-->
<!--            <h3><a href="news.html">特斯拉潜在对手Rivian再获亚马逊、福特新一轮13亿美元</a></h3>-->
<!--            <p>为推动电动汽车发展，德国政府及汽车行业计划提高财政补助，同时还将采取扩建电动汽车充电桩等一系列措施，三年前提出的补助政策原定于2020年底结束，现在计划延长至2025年底。</p>-->
<!--          </div>-->
<!--        </li>-->
<!--        <li>-->
<!--          <div class="date">30<span>2019.12</span></div>-->
<!--          <div class="nitem">-->
<!--            <h3><a href="news.html">一汽夏利重大资产重组：铁物股份入主、彻底消除与一汽股份同业竞争问题</a></h3>-->
<!--            <p>为推动电动汽车发展，德国政府及汽车行业计划提高财政补助，同时还将采取扩建电动汽车充电桩等一系列措施，三年前提出的补助政策原定于2020年底结束，现在计划延长至2025年底。</p>-->
<!--          </div>-->
<!--        </li>-->
<!--        <li>-->
<!--          <div class="date">07<span>2019.12</span></div>-->
<!--          <div class="nitem">-->
<!--            <h3><a href="news.html">新能源汽车产业:已然冬至 何时春来？</a></h3>-->
<!--            <p>为推动电动汽车发展，德国政府及汽车行业计划提高财政补助，同时还将采取扩建电动汽车充电桩等一系列措施，三年前提出的补助政策原定于2020年底结束，现在计划延长至2025年底。</p>-->
<!--          </div>-->
<!--        </li>-->
<!--        <li>-->
<!--          <div class="date">28<span>2019.12</span></div>-->
<!--          <div class="nitem">-->
<!--            <h3><a href="news.html">恒大汽车版图隐现:先天津后上海 10万辆汽车项目在建</a></h3>-->
<!--            <p>为推动电动汽车发展，德国政府及汽车行业计划提高财政补助，同时还将采取扩建电动汽车充电桩等一系列，三年前提出的补助政策原定于2020年底结束，现在计划延长至2025年底。</p>-->
<!--          </div>-->
<!--        </li>-->
<!--        <li>-->
<!--          <div class="date">24<span>2019.12</span></div>-->
<!--          <div class="nitem">-->
<!--            <h3><a href="news.html">百度与银川市政府达成自动驾驶商用车领域合作</a></h3>-->
<!--            <p>为推动电动汽车发展，德国政府及汽车行业计划提高财政补助，同时还将采取扩建电动汽车充电桩等一系列措施，三年前提出的补助政策原定于2020年底结束，现在计划延长至2025年底。</p>-->
<!--          </div>-->
<!--        </li>-->
<!--      </ul>-->
<!--      <div class="pagenav">-->
<!--        <el-pagination-->
<!--            background-->
<!--            layout="prev, pager, next"-->
<!--            :total="1000">-->
<!--        </el-pagination>-->
<!--      </div>-->

<!--    </div>-->
<!--    <div id="sidebar">-->
<!--      <h2>资讯推荐</h2>-->
<!--      <ul>-->
<!--        <li><a href="news.html">11月国内车市销量下滑3.6%</a></li>-->
<!--        <li><a href="news.html">难说再见！保时捷第七代911停产</a></li>-->
<!--        <li><a href="news.html">新能源遇“五连降” 现在是入场最佳期？</a></li>-->
<!--        <li><a href="news.html">增资或达13.5亿 特来电扩股引入新投资</a></li>-->
<!--        <li><a href="news.html">超额完成任务 全国ETC客户已达1.92亿</a></li>-->
<!--        <li><a href="news.html">造型更运动 大众全新一代Caddy渲染图</a></li>-->
<!--        <li><a href="news.html">宝沃BX3上市 推4款车型 售9.68万元起</a></li>-->
<!--        <li><a href="news.html">雪佛兰首款纯电城际轿跑畅巡预售开启</a></li>-->
<!--        <li><a href="news.html">售价5.39万-7.39万 吉利全新远景正式上市</a></li>-->
<!--        <li><a href="news.html">更具档次感 零跑T03公布轮廓图</a></li>-->
<!--      </ul>-->
<!--    </div>-->
  </div>

</template>

<style scoped>
.pagenav{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
}

.layout {
  width: 1200px;
  margin: 0 auto;
}
/* content */
#wrapper {
  overflow: hidden;
}

#content {
  width: 792px;
  float: left;
  min-height: 560px;
}



.curpostion {
  margin-top: 40px;
  line-height: 20px;
}

.curpostion span {
  padding: 0 8px;
}

.news p {
  text-indent: 2em;
  margin-bottom: 16px;
}
.news strong{
}
.news span{ color:red;
  font-weight: 600;
}

.news ul,
.news ol {
  padding-left: 18px;
  margin-bottom: 16px;
}

.news ol li {
  list-style: decimal;
}

.news ul li {
  list-style: disc;
}
/* ================================================================ */
/* sidebar */
#sidebar {
  width: 384px;
  float: right;
}

#sidebar h2,
.title {
  border-left: 3px solid #dd3333;
  font-size: 28px;
  line-height: 28px;
  margin-top: 40px;
  margin-bottom: 24px;
  padding-left: 16px;
}

#sidebar li {
  font-size: 16px;
  line-height: 32px;
}

#sidebar li a {
  color: #666;
  display: block;
  background: url(/src/assets/img/arrow-right.png) no-repeat left center;
  padding-left: 24px;
}

#sidebar li a:hover {
  color: #f64747;
  background: url(/src/assets/img/arrow-right.png) no-repeat 8px center;
}
/* ====================================================================== */
/* newslist */
.title {
  margin-bottom: 48px;
}

.newslist li {
  overflow: hidden;
  margin-bottom: 24px;

}

.newslist .date {
  width: 80px;
  float: left;
  font-size: 28px;
  line-height: 48px;
  color: #666;
  text-align: center;
  /* background-color:#f9f9f9 ; */
  background-color:#CCFFFF;
  border-radius: 8px;
}

.newslist .date span {
  font-size: 14px;
  display: block;
  border-top: 1px solid #fff;

}

.nitem {
  width: 687px;
  float: right;
  padding-bottom: 16px;
  border-bottom: 1px dotted #ccc;
}

.nitem h3 {
  font-size: 24px;
  line-height: 33px;
  margin-bottom: 8px;
  font-weight: 500;
}

.nitem p {
  font-size: 16px;
  color: #666;
  line-height: 22px;
}

.pagenav {
  margin: 32px 0;
  text-align: right;
  font-size: 16px;
  line-height: 32px;
}

.pagenav a {
  display: inline-block;
  width: 40px;
  margin: 0 2px;
  background: #f77770;
  color: #FFF;
  text-align: center;

}

.pagenav a:hover {
  background-color: #f64747;
  color: white;
}



.cartopt .numopt input{
  float: left;
  text-align:center;
  line-height: 60px;
  width:48px;
  height: 60px;
  border: none;
}
.cartopt .numopt p{
  float: left;
  width:30px;
}
.cartopt .numopt a{
  display: block;
  background-color: #f5f5f5;
  text-align: center;
  line-height: 30px;
  border-bottom: 1px solid #ebebeb;

}
.cartopt .numopt a:last-child{
  border-bottom:none;
}

.loginform form{
  padding: 0 64px 32px 64px;
}
.loginform p{
  color:#666;
}
.loginform p span{
  display: none;
  line-height:40px;
  color:#666;
}
.loginform h2{
  line-height: 28px;
  font-size: 22px;
  color:#f64747;
  padding:48px 0;
  text-align: center;
}
.loginform h2 span{
  margin-right: 8px;
}
.loginform h2 a{
  color:#000;
  margin-left: 8px;
}
.loginform p{
  margin-bottom: 32px;
}
.loginform p label{
  width:32px;
  height: 32px;
  text-indent: -9999px;
  background:#f5f5f5;
  display:inline-block;
}

.loginform p a{
  color:#f64747;
  font-weight: 600;
}

.messageform p{
  margin-bottom: 24px;
}
.messageform p label:first-child{
  display: inline-block;
  width:80px;
  height: 34px;
  line-height: 34px;
  text-align: left;
}

.message-list li{
  border-bottom: 1px solid #ebebeb;
  padding-bottom: 16px;
  margin-bottom: 16px;
  overflow: hidden;
}

.mcontent h3{
  font-size: 16px;
  color:#666;
  line-height: 32px;
  font-weight: 500;
}
.mcontent h3 span{
  margin-left: 16px;
}
.mcontent h3 label{
  float: right;
}
.mcontent h4{
  font-size: 18px;
  line-height: 48px;
}


#cart table{
  margin: 32px 0;
  width:100%;
  border-collapse: collapse;
  font-size: 16px;
}
#cart table thead,#cart table tfoot{
  background-color: #f5f5f5;
}
#cart table td,#cart table th{
  padding:16px 0;
  text-align: center;
}
#cart table td img{
  width:100px;
}
#cart table tr{
  border-bottom:1px solid #ccc;
}

#cart .numopt input{
  text-align:center;
  line-height: 60px;
  width:48px;
  height: 30px;
  border: none;
}
#cart .numopt a{
  display: inline-block;
  width:30px;
  height: 30px;
  line-height: 30px;
  background-color: #f5f5f5;
}

</style>
